import React from 'react'
import './todo.css'
// ===================================================================== Temp
import Controls from '#cpt/temp/Controls'
// ===================================================================== Declare
const { $fn, $http, $Lazy } = window
// ===================================================================== Lazy
const Page 		= $Lazy.load(()=>import('#tp/page/page-container'))
const Box 		= $Lazy.load(()=>import('#tp/box/box'))
const Input 	= $Lazy.load(()=>import('@antd/form/input'))
const Button 	= $Lazy.load(()=>import('@antd/button'))
const CheckBox	= $Lazy.load(()=>import('@antd/form/checkbox'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		info: {},
		isConnect: false,
		back_content: '',
		msg: [],
		content: ''
	}
	
	model = {}
	
	componentDidMount(){
		const { uuid, type, send } = $fn.query()
		this.uuid = uuid
		this.sender = +send
		if(this.sender){
			this.setState({isConnect:true})
		}
		this.type = type
		this.fetch(uuid)
		this.getMsg(uuid)
	}
	
	// paging
	fetch = uuid => $http.submit(this,'work-event/info', { param: {status: 0, uuid} }).then(info => this.setState({info, back_content: info.back_content}))
	
	getMsg = event_id => $http.submit(this, 'work-event-msg/index', { param: {event_id} }).then(msg => {
		let isConnect = true
		if(+this.type) isConnect = Boolean(msg.length)
		this.setState({msg, isConnect}, () => this.msgBoxRef.scrollTop = this.msgBoxRef.scrollHeight)
	})
	
	send = () => {
		const { content, info } = this.state
		$http.submit(null, 'work-event-msg/add', { param: { content, event_id: info.uuid } }).then(() => {
			this.setState({content: ''})
			this.getMsg(this.uuid)
		})
	}
	
	// 操作按钮
	controls = () => [
		Controls.back.call(this, { refresh: true }),
		!this.sender && Controls.click.call(this,'提交',()=>{
			const { info, back_content } = this.state
			$http.submit(null, 'work-event/back', { successText: '提交成功', param: {back_content, uuids: [info.uuid]} }).then(() => {
				$fn.fresh.back.call(this)
			})
		}, { code: 'F2' }) 
	]
	
	Item = (title, value) => <div className='fxm mtb10'>
		<span className='mr10 tr g6' style={{width:50}}>{title}</span>
		<span>{value}</span>
	</div>
	
	levelItem = (title, {name, value}) => {
		const colors = [ '#333', '#0F9BCF', '#F89D00', '#FF5656' ]
		return <div className='fxm mtb10'>
			<span className='mr10 tr g6' style={{width:50}}>{title}</span>
			<div className='fxm'>
				<i className='r100px mr5' style={{width:6,height:6, background: colors[ +value - 1] }}></i>
				<span>{name}</span>
			</div>
		</div>
	}
	
	render(){
		const { info, isConnect, back_content, msg, content } = this.state
		return (
			<>
				<Page nobc className='todo'>
					<Box contentClassName='fx h ptb10' className='ex fv plr10' title='处理待办' controls	= { this.controls() }>
						<div className='jzer-table plr10 mr10' style={{width: 250}}	>
							<Box title='基本信息' contentClassName='g0'>
								{this.Item('发起部门', info.from_depart_name)}
								{this.Item('发起人', info.from_user_name)}
								{this.levelItem('级别', {name: info.level_name, value: info.level})}
								{this.Item('类型', info.event_type_name)}
								{this.Item('接收部门', info.to_depart_name)}
								{this.Item('接收人', info.to_user_name)}
								{this.Item('发起时间', info.created_at)}
								{this.Item('截至时间', info.end_at)}
							</Box>
						</div>
						<div className='fv ex'>
							<div className='jzer-table plr10 ex fx'>
								<Box contentClassName='fv ex' className='fv ex' title='内容'>
									<div className='ptb10 bbor1'>
										<span>标题：{info.title}</span>
									</div>
									<div className='b ptb10'>详情内容</div>
									<div className='rel ex fx pb20'>
										<Input style={{height: '100%'}} value={info.content} mode='textarea' disabled />
									</div>
									{ /* 新增附件展示 2022年11月7日17:49:21 敖得卓*/ }
									<div className='b ptb10'>附件</div>
									<a href={info.url} target="_blank" rel="noreferrer" style={{ maxWidth: '100%',display:'block', marginBottom: '10px' }}>
										 {$fn.isAssetTypeAnImage(info.url) ? <img src={info.url} style={{ maxWidth: '20%',display:'block'}} alt='avatar'  /> : info.url}
									</a> 
								</Box>
							</div>
							<div className='jzer-table plr10 mt10'>
								<Box contentClassName='fv ptb10' title='反馈'>
									<Input p='请输入' value={back_content} mode='textarea' onChanged={({value}) => this.setState({back_content: value})} />
									<div className='mt10'>
										<CheckBox label='是否进行沟通' value={isConnect} onChanged={({value}) => this.setState({isConnect: value})} />
									</div>
									<div className='fxmc mtb10'>
										<Button label='提交' width={70} disabled={!back_content} onClick={ () => $http.submit(null, 'work-event/back', { successText: '提交成功', param: {back_content, uuids: [info.uuid]} })} />
									</div>
								</Box>
							</div>
						</div>
						<div style={{width: isConnect ? 500 : 0, transition: 'all .5s'}}>
							<div className='jzer-table fx ml10 oh h' hidden={!isConnect}>
								<Box contentClassName='fv ex' title='沟通' className='mlr10 fv ex'>
									<div className='ex rel oh'>
										<div ref={ ref => this.msgBoxRef = ref} className='abs_full oys scrollbar'>
											{msg.map(v => {
												if (+v.my_send) {
													return (
														<div className='fx mtb10 xr' key={v.id}>
															<div className='fv ml20'>
																<div className='fxm xr'>
																	<span className='f11 gc'>{v.created_at}</span>
																	<span className='b f12 ml5'>{v.user_name}</span>
																</div>
																<div className='fx xr mt5 cf'>
																	<span className='p10 r5px' style={{backgroundColor: '#64B3BF'}}>{v.content}</span>
																</div>
															</div>
															<div className='ml5'>
																<div className='r100px tc lh30 cf b' style={{backgroundColor: v.head_portrait ? 'transparent' : '#208FA0', width: 30, height: 30}}>
																	{ v.head_portrait ? <img width='100%' height='100%' src={v.head_portrait} alt='' /> : info.to_user?.charAt() }
																</div>
															</div>
														</div>
													)
												} else {
													return (
														<div className='fx mtb10' key={v.id}>
															<div className='mr5'>
																<div className='r100px tc lh30 cf b' style={{backgroundColor: v.head_portrait ? 'transparent' : '#208FA0', width: 30, height: 30}}>
																	{  v.head_portrait ? <img width='100%' height='100%' src={v.head_portrait} alt='' /> : info.from_user?.charAt() }
																</div>
															</div>
															<div className='fv mr20'>
																<div className='fxm'>
																	<span className='b f12 mr5'>{v.user_name}</span>
																	<span className='f11 gc'>{v.created_at}</span>
																</div>
																<div className='fx mt5 cf'>
																	<span className='p10 r5px' style={{backgroundColor: '#64B3BF'}}>{v.content}</span>
																</div>
															</div>
														</div>
													)
												}
											})}
										</div>
									</div>
									<div className='fv' style={{borderTop: '1px sold #f0f0f0', padding: 5, height: 140}}>
										<Input p='请输入' outer mode='textarea' onKeyDown={e => {
											if ((e.ctrlKey || e.shiftKey) && e.code === 'Enter') {
												this.setState({content: content + '\r\n'})
											} else if (e.code === 'Enter') {
												if(content) this.send()
											}
										} } onPressEnter={e => e.preventDefault()} value={content} onChanged={({value}) => this.setState({content: value})} />
										<div className='ex fxmc'>
											<Button ghost className='mr20' label='结束沟通' width={70} onClick= { () => {
												$http.submit(null, 'work-event-msg/end', { param: {event_id: info.uuid} }).then(() => {
													$fn.fresh.back.call(this)
												})
											}} />
											<Button label='发送 Enter' disabled={!content} width={70} onClick={ () => this.send() } />
										</div>
									</div>
								</Box>
							</div>
						</div>
					</Box>
				</Page>
			</>
		)
	}
}

export default Index